<template>
  <div class="category-page">
    <div class="category-content">
      <category-sidebar :categories="categories" :active-id="activeCategoryId" />
      <category-goods :goods-list="goodsList" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import CategoryGoods from './components/categoryGoods.vue'
import CategorySidebar from './components/categorySidebar.vue'

interface CategoryItem {
  id: number
  name: string
}

interface GoodsItem {
  id: number
  name: string
  price: number
  thumb: string
}

const categories = ref<CategoryItem[]>([
  { id: 1, name: '挂脖围裙' },
  { id: 2, name: '短袖T恤' },
  { id: 3, name: '卫衣马甲' },
  { id: 4, name: '服饰鞋帽' }
])

const activeCategoryId = ref<number>(1)

const goodsList = ref<GoodsItem[]>([
  {
    id: 1,
    name: '冰离子纯色翻领',
    price: 99.9,
    thumb: 'https://static.erp.91spyc.com/spider/n559fH1VF7DwywZaBKwkwy7qDf3iyPuIanKNDg64.jpg'
  },
  {
    id: 2,
    name: '富士棉翻领短袖',
    price: 199.9,
    thumb: 'https://static.erp.91spyc.com/spider/DbmQrqQxhh7S91WYW5qZMxvN9SFaeDCja3zNSAJY.jpg'
  },
  {
    id: 3,
    name: '富士棉拼色款',
    price: 159.9,
    thumb: 'https://static.erp.91spyc.com/spider/n559fH1VF7DwywZaBKwkwy7qDf3iyPuIanKNDg64.jpg'
  }
])

onMounted(async () => {})
</script>

<style lang="scss" scoped>
.category-page {
  min-height: calc(100vh - 100px);
  background: #f7f8fa;
  display: flex;
  .category-content {
    flex: 1;
    display: flex;
  }
}
</style>
